@mixin hover-element() {
    border-color: $stateHoverBorderColor;
    background: $stateHoverBgColor;
    color: $stateHoverTextColor;
    
    a {
        color: $stateHoverTextColor;
    }
}

@mixin icon-override($icon) {
    background: none !important;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-indent: 0px !important;
    text-align: center;
    
    &:before {
        content: $icon;
    }
}

.ui-widget { 
    font-family:  $fontFamily; 
    font-size: $fontSize; 
    
    input, select, textarea, button {
        font-family:  $fontFamily; 
        font-size: $fontSize; 
    }
    
    :active {
        outline: none;
    }
}

.ui-widget-content { 
    border: $contentBorderWidth solid $contentBorderColor; 
    background: $contentBgColor; 
    color: $contentTextColor;
    
    a {
        color: $contentTextColor;
    }
}

.ui-widget-header {
    // border: $headerBorderWidth solid $headerBorderColor; 
    background: $headerBgColor; 
    color: $headerTextColor; 
    font-weight: $headerFontWeight; 
    
    a {
        color: $headerTextColor; 
    }
}

.ui-widget-overlay { 
    background: #666666; 
    opacity: .50; 
    filter:Alpha(Opacity=50); 
}

.ui-state-default { 
    border: $stateDefaultBorderWidth solid $stateDefaultBorderColor; 
    background: $stateDefaultBgColor; 
    color: $stateDefaultTextColor;
    
    a {
        color: $stateDefaultTextColor ;
    }
}

.ui-state-active {
    border-color: $stateActiveBorderColor;
    background: $stateActiveBgColor; 
    color: $stateActiveTextColor; 
    
    a {
        color: $stateActiveTextColor;
    }
}

.ui-state-highlight  {
    border-color: $stateHighlightBorderColor;
    background: $stateHighlightBgColor;
    color: $stateHighlightTextColor;
    
    a {
        color: $stateHighlightTextColor;
    }
}

.ui-state-focus {
    border-color: $stateFocusBorderColor;
    background: $stateFocusBgColor;
    color: $stateFocusTextColor;
    
    a {
        color: $stateFocusTextColor;
    }
}

.ui-state-error {
    border-color: $stateErrorBorderColor;
    background: $stateErrorBgColor;
    color: $stateErrorTextColor;
    
    a {
        color: $stateErrorTextColor;
    }
}

.ui-state-disabled,
.ui-widget:disabled {
    opacity: $disabledOpacity; 
    filter: Alpha(Opacity= $disabledOpacity * 100); 
    background-image: none; 
    cursor: default !important;
    
    * {
        cursor: default !important;
    }
}

/* Forms */
.ui-inputtext {
    background: $inputBgColor;
    color: $inputTextColor;
}

.ui-inputtext:enabled:hover {
    border-color: $stateHoverBorderColor;
}

.ui-inputtext.ui-state-focus,
.ui-inputtext:focus {
    outline: 0 none;
    border-color: $stateFocusBorderColor;
    -moz-box-shadow: 0px 0px 5px $stateFocusBorderColor;
    -webkit-box-shadow: 0px 0px 5px $stateFocusBorderColor;
    box-shadow: 0px 0px 5px $stateFocusBorderColor;
}

.ui-autocomplete {
    .ui-autocomplete-multiple-container:not(.ui-state-disabled) {
        &:hover {
            border-color: $stateHoverBorderColor;
        }
        
        &.ui-state-focus {
            border-color: $stateFocusBorderColor;
            
        }
    }
}

.ui-chips {
    > ul:not(.ui-state-disabled) {
        &:hover {
            border-color: $stateHoverBorderColor;
        }
        
        &.ui-state-focus {
            border-color: $stateFocusBorderColor;
        }
    }
}

.ui-button:focus,
.ui-button:enabled:hover,
.ui-button.ui-state-focus,
.ui-button:not(.ui-state-disabled):hover {
    outline: 0 none;
    @include hover-element();
}

.ui-button:enabled:active,
.ui-button.ui-state-active {
    border-color: $stateActiveBorderColor;
    background: $stateActiveBgColor; 
    color: $stateActiveTextColor;
}

.ui-chkbox-box:not(.ui-state-disabled):not(.ui-state-active):hover {
    @include hover-element();
}

.ui-radiobutton-box:not(.ui-state-disabled):not(.ui-state-active):hover {
    @include hover-element();
}

.ui-dropdown:not(.ui-state-disabled):hover {
    @include hover-element();
}

.ui-dropdown-panel .ui-dropdown-item:not(.ui-state-highlight):hover {
    @include hover-element();
}

.ui-listbox {
    .ui-listbox-header {
        .ui-listbox-filter-container {
            .fa {
                color: $inputTextColor;
            }
        }
    }
    
    &:not(.ui-state-disabled) {
        .ui-listbox-item:not(.ui-state-highlight):hover {
            @include hover-element();
        }
    }
    
    &.ui-state-disabled {
        .ui-chkbox-box:not(.ui-state-active):hover {
            border-color: $stateDefaultBorderColor; 
            background: $stateDefaultBgColor; 
            color: $stateDefaultTextColor;
        }
    }
}

.ui-multiselect:not(.ui-state-disabled):hover {
    @include hover-element();
}

.ui-multiselect-panel .ui-multiselect-item:not(.ui-state-highlight):hover {
    @include hover-element();
}

.ui-multiselect-panel .ui-multiselect-close {
    color: $headerIconTextColor;
}

.ui-multiselect-panel .ui-multiselect-filter-container .fa {
    color: $inputTextColor;
}

.ui-spinner:not(.ui-state-disabled) .ui-spinner-button:enabled:hover {
    @include hover-element();
}

.ui-spinner:not(.ui-state-disabled) .ui-spinner-button:enabled:active {
    border-color: $stateActiveBorderColor;
    background: $stateActiveBgColor; 
    color: $stateActiveTextColor;
}

.ui-selectbutton .ui-button:not(.ui-state-disabled):not(.ui-state-active):hover {
    @include hover-element();
}

.ui-togglebutton:not(.ui-state-disabled):not(.ui-state-active):hover {
    @include hover-element();
}

.ui-paginator a:not(.ui-state-disabled):not(.ui-state-active):hover {
    @include hover-element();
}

.ui-datatable {
    .ui-rowgroup-header a {
        color: $headerTextColor;
    }
    
    .ui-sortable-column:not(.ui-state-active):hover {
        background: $stateHoverBgColor;
        color: $stateHoverTextColor;
    }
    
    .ui-row-toggler {
        color: $contentTextColor;
    }
    
    tbody.ui-datatable-hoverable-rows {
        > tr.ui-widget-content:not(.ui-state-highlight):hover {
            cursor: pointer;
            background: $stateHoverBgColor;
            color: $stateHoverTextColor;
        }
    }
}

.ui-orderlist {
    .ui-orderlist-item:not(.ui-state-highlight):hover {
        @include hover-element();
    }
}

.ui-picklist {
    .ui-picklist-item:not(.ui-state-highlight):hover {
        @include hover-element();
    }
}

.ui-tree {
    &.ui-treenode-dragover {
        border-color: $stateHighlightBorderColor;
    }
    
    .ui-treenode-content {
        &.ui-treenode-selectable {
            .ui-treenode-label:not(.ui-state-highlight):hover {
                @include hover-element();
            }
        }
        
        &.ui-treenode-dragover {
            background: $stateActiveBgColor;
            color: $stateActiveTextColor;
        }
    }
    
    &.ui-tree-horizontal {
        .ui-treenode-content.ui-treenode-selectable {
            .ui-treenode-label:not(.ui-state-highlight):hover {
                background-color: inherit;
                color: inherit;
            }
            
            &:not(.ui-state-highlight):hover {
                @include hover-element();
            }
        }
    }
}

.ui-treetable {
    .ui-treetable-row.ui-treetable-row-selectable:not(.ui-state-highlight):hover {
        background: $stateHoverBgColor;
        color: $stateHoverTextColor;
    }
}

.ui-organizationchart {
    .ui-organizationchart-node-content {
        &.ui-organizationchart-selectable-node:not(.ui-state-highlight):hover {
            @include hover-element();
        }
    }
}

.ui-accordion {
    .ui-accordion-header:not(.ui-state-active):not(.ui-state-disabled):hover {
        @include hover-element();
    }
}

.ui-fieldset {
    &.ui-fieldset-toggleable {
        .ui-fieldset-legend:hover {
            @include hover-element();
        }
    }
}

.ui-panel {
    .ui-panel-titlebar {
        .ui-panel-titlebar-icon:hover {
            @include hover-element();
        }
    }
}

.ui-tabview {
    .ui-tabview-nav {        
        li {            
            &:not(.ui-state-active):not(.ui-state-disabled):hover {
                @include hover-element();
            }
        }
    }
}

.ui-dialog {
    .ui-dialog-titlebar-icon {
        color: $headerTextColor;
        
        &:hover {
            @include hover-element();
        }
    }
}

.ui-overlaypanel {
    .ui-overlaypanel-close:hover {
        @include hover-element();
    }
}

.ui-inplace {
    .ui-inplace-display:hover {
        @include hover-element();
    }
}

.ui-breadcrumb {
    a {
        color: $headerTextColor;
    }
}

.ui-menu {
    .ui-menuitem {
        .ui-menuitem-link {
            color: $contentTextColor;

            &:hover {
                @include hover-element();
                border-color: transparent;
            }
        }
        
        &.ui-menuitem-active {
            > .ui-menuitem-link {
                @include hover-element();
                border-color: transparent;
            }
        }
    }
}

.ui-tabmenu {
    .ui-tabmenu-nav {
        li:not(.ui-state-active):hover {
            @include hover-element();
        }
    }
}

.ui-steps {
    .ui-steps-item:not(.ui-state-highlight):not(.ui-state-disabled):hover {
        @include hover-element();
    }
}

.ui-panelmenu {
    .ui-panelmenu-header {
        &:not(.ui-state-active):hover {
            @include hover-element();
            border-color: $stateDefaultBorderColor;
            
            a {
                color: $stateHoverTextColor;
            }
        }
        
        &.ui-state-active {
            a {
                color: $stateActiveTextColor;
            }
        }
    }
    
    .ui-panelmenu-content {
        .ui-menuitem-link {
            color: $contentTextColor;
            
            &:hover {
                @include hover-element();
                border-color: transparent;
            }
        }
    }
}

.ui-datepicker {
    .ui-datepicker-header {
        a {
            color: $headerTextColor;
            
            &:hover {
                @include hover-element();
            }
        }
    }
    
    .ui-datepicker-calendar {
        td:not(.ui-state-disabled) {
            a:hover {
                @include hover-element();
            }            
        }
    }
}

.fc {
    .fc-toolbar {
        .fc-prev-button {
            .ui-icon-circle-triangle-w {
                margin-top: .3em;
                @include icon_override("\f053");
            }
        }
        
        .fc-next-button {
            .ui-icon-circle-triangle-e {
                margin-top: .3em;
                @include icon_override("\f054");
            }
        }
    }
}

.ui-rating {
    a {
        color: $inputTextColor;
    }
}

.ui-organizationchart {
    .ui-organizationchart-line-down {
        background-color: darken($contentBorderColor, 10%);
    }
    
    .ui-organizationchart-line-left {
        border-right: 1px solid darken($contentBorderColor, 10%);
    }
    
    .ui-organizationchart-line-right {
        
    }
    
    .ui-organizationchart-line-top {
        border-top: 1px solid darken($contentBorderColor, 10%);
    }
    
    .ui-organizationchart-node-content {
        border-color: darken($contentBorderColor, 10%);
    }
    
    .ui-organizationchart-node-content .ui-node-toggler {
        color: darken($contentBorderColor, 10%);
    }
} 

/* Validation */
.ui-inputtext.ng-dirty.ng-invalid,
p-dropdown.ng-dirty.ng-invalid > .ui-dropdown,
p-autocomplete.ng-dirty.ng-invalid > .ui-autocomplete > .ui-inputtext,
p-calendar.ng-dirty.ng-invalid > .ui-inputtext,
p-chips.ng-dirty.ng-invalid > .ui-inputtext,
p-inputmask.ng-dirty.ng-invalid > .ui-inputtext,
p-checkbox.ng-dirty.ng-invalid .ui-chkbox-box,
p-radiobutton.ng-dirty.ng-invalid .ui-radiobutton-box,
p-inputswitch.ng-dirty.ng-invalid .ui-inputswitch,
p-listbox.ng-dirty.ng-invalid .ui-inputtext,
p-multiselect.ng-dirty.ng-invalid > .ui-multiselect,
p-spinner.ng-dirty.ng-invalid > .ui-inputtext,
p-selectbutton.ng-dirty.ng-invalid .ui-button,
p-togglebutton.ng-dirty.ng-invalid .ui-button {
    border-bottom-color: $invalidInputBorderColor;
}

/* Cornering */
.ui-corner-tl { -moz-border-radius-topleft: $borderRadius; -webkit-border-top-left-radius: $borderRadius; border-top-left-radius: $borderRadius; }
.ui-corner-tr { -moz-border-radius-topright: $borderRadius; -webkit-border-top-right-radius: $borderRadius; border-top-right-radius: $borderRadius; }
.ui-corner-bl { -moz-border-radius-bottomleft: $borderRadius; -webkit-border-bottom-left-radius: $borderRadius; border-bottom-left-radius: $borderRadius; }
.ui-corner-br { -moz-border-radius-bottomright: $borderRadius; -webkit-border-bottom-right-radius: $borderRadius; border-bottom-right-radius: $borderRadius; }
.ui-corner-top { -moz-border-radius-topleft: $borderRadius; -webkit-border-top-left-radius: $borderRadius; border-top-left-radius: $borderRadius; -moz-border-radius-topright: $borderRadius; -webkit-border-top-right-radius: $borderRadius; border-top-right-radius: $borderRadius; }
.ui-corner-bottom { -moz-border-radius-bottomleft: $borderRadius; -webkit-border-bottom-left-radius: $borderRadius; border-bottom-left-radius: $borderRadius; -moz-border-radius-bottomright: $borderRadius; -webkit-border-bottom-right-radius: $borderRadius; border-bottom-right-radius: $borderRadius; }
.ui-corner-right {  -moz-border-radius-topright: $borderRadius; -webkit-border-top-right-radius: $borderRadius; border-top-right-radius: $borderRadius; -moz-border-radius-bottomright: $borderRadius; -webkit-border-bottom-right-radius: $borderRadius; border-bottom-right-radius: $borderRadius; }
.ui-corner-left { -moz-border-radius-topleft: $borderRadius; -webkit-border-top-left-radius: $borderRadius; border-top-left-radius: $borderRadius; -moz-border-radius-bottomleft: $borderRadius; -webkit-border-bottom-left-radius: $borderRadius; border-bottom-left-radius: $borderRadius; }
.ui-corner-all { -moz-border-radius: $borderRadius; -webkit-border-radius: $borderRadius; border-radius: $borderRadius; }